<template>
  <div class="app-container">
    <e-page
      ref="page"
      :search-conf="searchConf"
      :table-conf="tableConf"
      :buttons="buttons"
      @getData="setData"
      @event="handleEvent"
    >
      <!--    行上(按钮)插槽-->
      <!--   <el-buttons></el-buttons> -->

      <!--    行内(按钮)插槽-->
      <!--   <el-operation></el-operation> -->

      <!--    查询项插槽 以search_开头-->

      <!--    表格插槽 以table_开头-->
      <!--    顶部插槽 名称为buttons-->
      <template #buttons="{selection}">
        <el-button size="mini" type="primary" @click="insert({selection})" v-permission="'insert'">新增</el-button>
        <el-button size="mini" type="danger" @click="del({selection})" v-permission="'del'">删除</el-button>
      </template>
      <!--    操作栏 名称为operation-->
      <template #operation="{row}">
        <el-button size="mini" type="text" @click="edit({row})" v-permission="'edit'">修改</el-button>
      </template>
    </e-page>
    <el-dialog :title='formTitle' :visible.sync="formVisible" width="1040px" :before-close="formClose" append-to-body
               v-dialog-drag>
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules" style="width:1000px">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="name" label="角色名">
              <el-input type="text" placeholder="请输入角色名" v-model="formData.name" maxlength="20" clearable
                        style="width:320px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-for="(item, index) in options.menuGroup.list" :key="item.value">
            <el-form-item :label="`${item.label}权限`">
              <div class="tree_container" style="width:320px">
                <el-tree
                  ref="menuTree"
                  :data="menuTree.data[item.value]"
                  v-loading="menuTree.loading"
                  node-key="id"
                  :props="menuTree.props"
                  show-checkbox
                  :default-checked-keys="menuTree.selectedKeys[item.value]"
                  @check-change="handleMenuCheckChange($event, item.value)"
                  @check="handleMenuCheck"
                >
                </el-tree>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button :loading="formLoading" type="primary" @click="formSave">保存</el-button>
        <el-button @click="formClose">关闭</el-button>
      </template>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="detailVisible" append-to-body width="960px" :before-close="detailClose"
               v-dialog-drag>
      <el-descriptions direction="horizontal" border labelClassName="descLabel" contentClassName="descContent"
                       :column="2">
        <el-descriptions-item label="角色名">{{ detailData.name }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detailData.createBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime | dateTimeFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{ detailData.updateBy | userFormat }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ detailData.updateTime | dateTimeFormat }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailClose">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script src="./index.js"/>
<style scoped>
</style>
